@import "../../../styles/mixins.scss";
.root {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(-150deg, #2ae0b3, #26CAA1);
}

.wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 180%;
  border-radius: 0.04rem;
  background: #fefefe;
  width: 4rem;
  height: 6rem;
  text-align: center;
  box-shadow: 1.06066px 1.06066px 0 rgba(27, 183, 145, 0.794), 2.12132px 2.12132px 0 rgba(27, 183, 145, 0.788), 3.18198px 3.18198px 0 rgba(27, 183, 145, 0.782), 4.24264px 4.24264px 0 rgba(27, 183, 145, 0.776), 5.3033px 5.3033px 0 rgba(27, 183, 145, 0.77), 6.36396px 6.36396px 0 rgba(27, 184, 145, 0.764), 7.42462px 7.42462px 0 rgba(27, 184, 146, 0.758), 8.48528px 8.48528px 0 rgba(27, 184, 146, 0.752), 9.54594px 9.54594px 0 rgba(28, 184, 146, 0.746), 10.6066px 10.6066px 0 rgba(28, 184, 146, 0.74), 11.66726px 11.66726px 0 rgba(28, 184, 146, 0.734), 12.72792px 12.72792px 0 rgba(28, 184, 146, 0.728), 13.78858px 13.78858px 0 rgba(28, 184, 146, 0.722), 14.84924px 14.84924px 0 rgba(28, 184, 146, 0.716), 15.9099px 15.9099px 0 rgba(28, 184, 146, 0.71), 16.97056px 16.97056px 0 rgba(28, 185, 146, 0.704), 18.03122px 18.03122px 0 rgba(28, 185, 146, 0.698), 19.09188px 19.09188px 0 rgba(28, 185, 147, 0.692), 20.15254px 20.15254px 0 rgba(28, 185, 147, 0.686), 21.2132px 21.2132px 0 rgba(28, 185, 147, 0.68), 22.27386px 22.27386px 0 rgba(28, 185, 147, 0.674), 23.33452px 23.33452px 0 rgba(28, 185, 147, 0.668), 24.39518px 24.39518px 0 rgba(29, 185, 147, 0.662), 25.45584px 25.45584px 0 rgba(29, 185, 147, 0.656), 26.5165px 26.5165px 0 rgba(29, 186, 147, 0.65), 27.57716px 27.57716px 0 rgba(29, 186, 147, 0.644), 28.63782px 28.63782px 0 rgba(29, 186, 148, 0.638), 29.69848px 29.69848px 0 rgba(29, 186, 148, 0.632), 30.75914px 30.75914px 0 rgba(29, 186, 148, 0.626), 31.81981px 31.81981px 0 rgba(29, 186, 148, 0.62), 32.88047px 32.88047px 0 rgba(29, 186, 148, 0.614), 33.94113px 33.94113px 0 rgba(29, 186, 148, 0.608), 35.00179px 35.00179px 0 rgba(29, 187, 148, 0.602), 36.06245px 36.06245px 0 rgba(30, 187, 148, 0.596), 37.12311px 37.12311px 0 rgba(30, 187, 149, 0.59), 38.18377px 38.18377px 0 rgba(30, 187, 149, 0.584), 39.24443px 39.24443px 0 rgba(30, 187, 149, 0.578), 40.30509px 40.30509px 0 rgba(30, 187, 149, 0.572), 41.36575px 41.36575px 0 rgba(30, 188, 149, 0.566), 42.42641px 42.42641px 0 rgba(30, 188, 149, 0.56), 43.48707px 43.48707px 0 rgba(30, 188, 149, 0.554), 44.54773px 44.54773px 0 rgba(30, 188, 150, 0.548), 45.60839px 45.60839px 0 rgba(30, 188, 150, 0.542), 46.66905px 46.66905px 0 rgba(31, 188, 150, 0.536), 47.72971px 47.72971px 0 rgba(31, 189, 150, 0.53), 48.79037px 48.79037px 0 rgba(31, 189, 150, 0.524), 49.85103px 49.85103px 0 rgba(31, 189, 150, 0.518), 50.91169px 50.91169px 0 rgba(31, 189, 151, 0.512), 51.97235px 51.97235px 0 rgba(31, 189, 151, 0.506), 53.03301px 53.03301px 0 rgba(31, 190, 151, 0.5), 54.09367px 54.09367px 0 rgba(32, 190, 151, 0.494), 55.15433px 55.15433px 0 rgba(32, 190, 151, 0.488), 56.21499px 56.21499px 0 rgba(32, 190, 152, 0.482), 57.27565px 57.27565px 0 rgba(32, 190, 152, 0.476), 58.33631px 58.33631px 0 rgba(32, 191, 152, 0.47), 59.39697px 59.39697px 0 rgba(32, 191, 152, 0.464), 60.45763px 60.45763px 0 rgba(32, 191, 152, 0.458), 61.51829px 61.51829px 0 rgba(33, 191, 153, 0.452), 62.57895px 62.57895px 0 rgba(33, 192, 153, 0.446), 63.63961px 63.63961px 0 rgba(33, 192, 153, 0.44), 64.70027px 64.70027px 0 rgba(33, 192, 153, 0.434), 65.76093px 65.76093px 0 rgba(33, 193, 154, 0.428), 66.82159px 66.82159px 0 rgba(34, 193, 154, 0.422), 67.88225px 67.88225px 0 rgba(34, 193, 154, 0.416), 68.94291px 68.94291px 0 rgba(34, 193, 155, 0.41), 70.00357px 70.00357px 0 rgba(34, 194, 155, 0.404), 71.06423px 71.06423px 0 rgba(34, 194, 155, 0.398), 72.12489px 72.12489px 0 rgba(35, 194, 155, 0.392), 73.18555px 73.18555px 0 rgba(35, 195, 156, 0.386), 74.24621px 74.24621px 0 rgba(35, 195, 156, 0.38), 75.30687px 75.30687px 0 rgba(35, 196, 156, 0.374), 76.36753px 76.36753px 0 rgba(36, 196, 157, 0.368), 77.42819px 77.42819px 0 rgba(36, 196, 157, 0.362), 78.48885px 78.48885px 0 rgba(36, 197, 157, 0.356), 79.54951px 79.54951px 0 rgba(36, 197, 158, 0.35), 80.61017px 80.61017px 0 rgba(37, 198, 158, 0.344), 81.67083px 81.67083px 0 rgba(37, 198, 159, 0.338), 82.73149px 82.73149px 0 rgba(37, 199, 159, 0.332), 83.79215px 83.79215px 0 rgba(38, 199, 160, 0.326), 84.85281px 84.85281px 0 rgba(38, 200, 160, 0.32), 85.91347px 85.91347px 0 rgba(38, 200, 160, 0.314), 86.97413px 86.97413px 0 rgba(39, 201, 161, 0.308), 88.03479px 88.03479px 0 rgba(39, 201, 161, 0.302), 89.09545px 89.09545px 0 rgba(39, 202, 162, 0.296), 90.15611px 90.15611px 0 rgba(40, 202, 163, 0.29), 91.21677px 91.21677px 0 rgba(40, 203, 163, 0.284), 92.27743px 92.27743px 0 rgba(41, 204, 164, 0.278), 93.3381px 93.3381px 0 rgba(41, 204, 164, 0.272), 94.39876px 94.39876px 0 rgba(42, 205, 165, 0.266), 95.45942px 95.45942px 0 rgba(42, 206, 166, 0.26), 96.52008px 96.52008px 0 rgba(43, 207, 166, 0.254), 97.58074px 97.58074px 0 rgba(43, 207, 167, 0.248), 98.6414px 98.6414px 0 rgba(44, 208, 168, 0.242), 99.70206px 99.70206px 0 rgba(45, 209, 169, 0.236), 100.76272px 100.76272px 0 rgba(45, 210, 170, 0.23), 101.82338px 101.82338px 0 rgba(46, 211, 171, 0.224), 102.88404px 102.88404px 0 rgba(47, 212, 172, 0.218), 103.9447px 103.9447px 0 rgba(47, 214, 173, 0.212), 105.00536px 105.00536px 0 rgba(48, 215, 174, 0.206), 106.06602px 106.06602px 0 rgba(49, 216, 175, 0.2);}

.counter {
  font-size: 2rem;
  line-height: 1;
}

.btnCommon {
  padding: 0.20em 0.4em;
  line-height: 1;
  vertical-align: middle;
  border-radius: 3px;
  color: #fefefe;
  border: 3px solid;
  background: #fefefe;
  margin-top: 10px;
  margin-bottom: 10px;
  transition: transform 60ms ease-out;
  &:active {
    transform: translateY(2px);
    transition: transform 100ms ease-out;
  }
  &:hover,
  &:focus {
    outline: none;
  }
}

.increment, .decrement {
  composes: btnCommon;
  width: 1rem;
}

.increment {
  color: #1abc9c;
  border-color: #1abc9c;
  margin-right: 0.2rem;
}

.decrement {
  color: tomato;
  border-color: tomato;
}

.ifOdd, .async {
  composes: btnCommon;
}

.ifOdd {
  color: #da964c;
  border-color: #da964c;
}

.async {
  color: #37bae5;
  border-color: #37bae5;
}

.async[disabled] {
  color: #ccc;
  border-color: #ccc;
}